<template>
	<view class="special-item">
		<navigator :url="'/pages/category_list/category_list?id='+item._id+'&name='+item.name" class="box"
			v-if="!isMore">
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			<view class="mask">
				{{item.name}}
			</view>
			<view class="tab">
				{{timeAgo(item.updateTime)}}前更新
			</view>
		</navigator>
		<navigator url="/pages/categore/categore" open-type="switchTab" class="box more" v-if="isMore">
			<image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
			<view class="mask">
				<uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
				<view class="text">
					更多
				</view>
			</view>
		</navigator>
	</view>
</template>

<script setup>
	import {
		timeAgo
	} from '@/utils/common.js'
	defineProps({
		isMore: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: () => {}
		}
	})
</script>

<style lang="scss" scoped>
	.special-item {
		.box {
			height: 340rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;

			.mask {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 70rpx;
				background-color: rgba(0, 0, 0, .2);
				color: #fff;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				backdrop-filter: blur(20rpx); //背景模糊
			}

			.tab {
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(250, 129, 90, .5);
				color: #fff;
				font-size: 20rpx;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				backdrop-filter: blur(20rpx); //背景模糊
				transform: scale(.8); // 缩放
				transform-origin: left top; // 缩放原点
			}

			&.more {
				.mask {
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, .2);
					justify-content: center;
					flex-direction: column;
					align-items: center;

					.text {
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}
			}

			.pic {
				width: 100%;
			}
		}
	}
</style>